<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .color-text {
        text-align: center;
        font-size: 40px;
        background-image: -webkit-linear-gradient(
          left,
          blue,
          #66ffff 10%,
          #cc00ff 20%,
          #cc00cc 30%,
          #ccccff 40%,
          #00ffff 50%,
          #ccccff 60%,
          #cc00cc 70%,
          #cc00ff 80%,
          #66ffff 90%,
          blue 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        /* 改变background-size是为了让动画动起来 */
        background-size: 200% 100%;
        /* 启用动画 */
        animation: masked-animation 4s linear infinite;
      }

      @keyframes masked-animation {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: -100% 0;
        }
      }

      .hollow-out-text {
        text-align: center;
        font-size: 40px;
        /*设置背景透明*/
        /* -webkit-text-fill-color: transparent; */
        color: transparent;
        /*设置镂空线条*/
        -webkit-text-stroke: 1px #cc00ff;
      }
    </style>
  </head>
  <body>
    <div class="color-text">
      这里是彩色的文字这里是彩色的文字这里是彩色的文字这里是彩色的文字这里是彩色的文字这里是彩色的文字这里是彩色的文字
    </div>

    <div class="hollow-out-text">镂空文字</div>
  </body>
</html>
